<template>
	<div class="login-container">
		<div class="login-box">
			<h1>管理员登录</h1>

			<el-form ref="form" :rules="formRules" :model="formData">
				<el-form-item prop="username">
					<el-input
						v-model="formData.username"
						placeholder="username"
						prefix-icon="el-icon-user-solid"
					>
					</el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						v-model="formData.password"
						type="password"
						placeholder="password"
						prefix-icon="el-icon-lock"
						show-password
					>
					</el-input>
				</el-form-item>
				<el-form-item>
					<el-button size="medium" class="submit-btn" @click="submit" type="primary">登录</el-button>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
import axios from 'axios'
	export default {
    name: '/login',
		data () {
			return {
				formData: {},
				formRules: {
					username: [
						{required: true, trigger: 'change', message: '请输入用户名'}
					],
					password: [
						{required: true, trigger: 'change', message: '请输入密码'}
					]
				}
			}
		},
		methods: {
			submit () {
				this.$refs.form.validate(valid => {
					if (valid) {
						axios({
							url: 'http://c37g909045.zicp.vip/admin/auth/login',
							method: 'post',
							data: {
								...this.formData
							}
						}).then(res => {
							if (res.data.errno === 0) {
								this.$notify.success({
									title: '登录成功'
								})

                sessionStorage.setItem('Shopping-Admin-Token', res.data.data.token)
								setTimeout(() => {
									this.$router.push({
										path: '/userManage/userList'
									})
								}, 500)
							} else {
								this.$notify.error({
									title: res.data.errmsg
								})
							}
						})
					} else {
						return false
					}
				})
			}
		}
	}
</script>

<style scope lang="scss">
.login-container {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: #2d3a4b;
	display: flex;
	justify-content: center;
	align-items: center;

	.login-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 520px;
		padding: 35px;
		box-sizing: border-box;

		h1 {
			color: #ffffff;
			font-size: 26px;
		}

		.el-form {
			width: 100%;

			.el-input {
				
				.el-input__inner {
					height: 50px;
					border: 1px solid hsla(0,0%,100%,.1);
					background: rgba(0,0,0,0.1);
				}
			}
		}

		.submit-btn {
			width: 100%;
		}
	}
}
</style>